<template>
	<fieldset>
		<legend>我的</legend>
		<h1>支付宝到账:1000000元</h1>
		<h3>动态路由参数:{{$route.params.name}}</h3>
		<h1>{{name}}</h1>
		<fieldset>
			<legend>计数器</legend>
			<button @click="DECREMENT">-</button>
			&nbsp;
			<b>{{num}}</b>
			&nbsp;
			<button @click="INCREMENT(333)">+</button>
			<h2>msg:{{msg.split("").reverse().join("")}}</h2>
			<h2>reverseMsg:{{reverseMsg}}</h2>
			<h3>{{product}}</h3>
			<h4>获取模块化store中的状态:{{username}}</h4>
		</fieldset>
	</fieldset>
</template>
<script>/*  */
	//辅助函数
	//store中的状态可以直接变更,但是不推荐这样做
	//`更改vuex中状态的唯一方式就是提交mutation`
	//mutations都会映射到methods这个对象中
	import { mapState,mapMutations,mapGetters,mapActions } from "vuex";
	export default {
		methods: {
			...mapActions(['FETCH_PRODUCT']),
			//映射模块化store的mutations
			...mapMutations('usersStore',['CHANGE_USERNAME']),
			...mapMutations(['INCREMENT','DECREMENT','usersStore/CHANGE_USERNAME']),
			// add() {
			// 	this.$store.commit("INCREMENT",555);
			// },
			// minus() {
			// 	this.$store.commit("DECREMENT");
			// },
			//触发action的方法

			//this.$store.dispatch('FETCH_PRODUCT',123213)
		},
		computed: { 
			...mapGetters(['reverseMsg']),
			...mapState('usersStore',['username']),
			...mapState(["name", "num","msg","product"]),
		},
		mounted() {
			setTimeout(() => {
				// this.$store.state.name = "韩梅梅";
				this.FETCH_PRODUCT()
				this.CHANGE_USERNAME()
			}, 2000);
			//两个对象
			//面试题目
			//console.log(this.$router); //跟路由对象,包含了当前路由对象
			//console.log(this.$route); //当前路由对象

			// this.$store.commit("usersStore/CHANGE_USERNAME")
			// this['usersStore/CHANGE_USERNAME']()
			
		},
	};
</script>